<template>
  <div id="select-item" v-show="showFlag">
    <transition name="fade">
      <div class="container" v-if="showFlag">
        <div class="header-box">
          <div class="title">我的仓库</div>
          <div class="close-btn">
            <el-button
              class="close-btn"
              plain
              size="small"
              icon="el-icon-close"
              circle
              @click="$emit('close')"
            ></el-button>
          </div>
        </div>
        <transition name="add-count" mode="out-in">
          <div class="add-count-box" v-show="selectedList.length != 0">
            <el-button type="primary" @click="submitAppend">添加</el-button>
            <span class="hint"
              >已选择 {{ selectedList.length }} 个艺术品，确认添加</span
            >
          </div>
        </transition>
        <div class="item-box-out">
          <div class="item-box">
            <ArtItem
              :artData="item"
              class="art-item"
              :class="{ 'art-selected': selectedList.indexOf(item.id) != -1 }"
              v-for="item in myCreated.data"
              :key="item.id"
              :type="'my'"
            >
              <div class="mask" slot="mask">
                <input
                  class="checkbox"
                  type="checkbox"
                  @click="selectItem(item.id)"
                  :checked="selectedList.indexOf(item.id) != -1"
                />
              </div>
            </ArtItem>
          </div>
        </div>
        <div class="pagination" v-if="myCreated.count != 0">
          <el-pagination
            :page-size="pageSize"
            :pager-count="5"
            layout="prev, pager, next"
            :current-page="pageIndex"
            :total="myCreated.count"
            background
            @prev-click="prevPage"
            @next-click="nextPage"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
        <div class="no-result" v-if="myCreated.count == 0">
          <span>什么都没找到</span>
        </div>
      </div>
    </transition>

    <!-- <div class="close-btn" @click="$emit('close')">关闭</div>  -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import ArtItem from "@/components/ArtItem";
import { addArrayShop } from "@/api";
export default {
  name: "SelectItem",
  props: ["showFlag", "array_id"],
  components: {
    ArtItem,
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 20,

      // 选中的列表
      selectedList: [],
    };
  },
  mounted() {
    this.$store.dispatch("myCreated", {
      pageIndex: this.pageIndex.toString(),
      pageSize: this.pageSize.toString(),
    });
  },
  computed: {
    ...mapState({
      myCreated: (store) => store.user.myCreated,
    }),
  },
  methods: {
    // 上一页
    prevPage() {
      this.pageIndex -= 1;
      this.$store.dispatch("myCreated", {
        pageIndex: this.pageIndex.toString(),
        pageSize: this.pageSize.toString(),
      });
    },
    // 下一页
    nextPage() {
      this.pageIndex += 1;
      this.$store.dispatch("myCreated", {
        pageIndex: this.pageIndex.toString(),
        pageSize: this.pageSize.toString(),
      });
    },

    // 页数改变
    pageChange(page) {
      this.pageIndex = page;
      this.$store.dispatch("myCreated", {
        pageIndex: page.toString(),
        pageSize: this.pageSize.toString(),
      });
    },

    // 选中项目
    selectItem(id) {
      // 如果存在，移除
      let index = this.selectedList.indexOf(id);
      if (index != -1) {
        this.selectedList.splice(index, 1);
        return;
      }
      // 如果没有，添加
      this.selectedList.push(id);
    },

    // 添加项目
    async submitAppend() {
      if (this.selectedList.length == 0) {
        this.$message({
          message: "请至少选择一项",
          type: "warning",
          customClass: "el-message-custom",
        });
        return;
      }

      // 提交请求
      let result = await addArrayShop(
        this.selectedList.toString(),
        this.array_id
      );
      if (result.flag) {
        this.$message({
          message: result.msg,
          type: "success",
          customClass: "el-message-custom",
        });
        // 重新获取数据
        this.$emit("getCollectionDetail");
      } else {
        this.$message({
          message: result.msg,
          type: "error",
          customClass: "el-message-custom",
        });
      }
    },
  },
};
</script>

<style lang='less'>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(50vh);
}

.add-count-enter,
.add-count-leave-to {
  opacity: 0;
}
.add-count-enter-active,
.add-count-leave-active {
  transition: all 0.5s ease;
}

#select-item {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 60px;
  .container {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    overflow-y: scroll;

    .header-box {
      margin: 0;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .hint {
      margin-left: 10px;
      font-size: 14px;
      color: #666;
    }
    .add-count-box {
      margin-left: 1.5%;
    }
    .item-box {
      height: 95%;
      width: 100%;
      padding: 0;
      overflow: scroll;
    }
    .mask {
      opacity: 0;
      // visibility: hidden;
      pointer-events: none;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s ease;
      input {
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        background: #fff;
        border-radius: 50%;
        position: relative;
        transition: all 0.1s;
        width: 50px;
        height: 50px;
      }
      input:checked {
        background: var(--themeColor1);
      }
      input:checked::after {
        content: "";
        height: 13px;
        width: 25px;
        border: #fff solid 5px;
        position: absolute;
        top: 10px;
        left: 8px;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
      }
    }
    .art-item:hover {
      .mask {
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
      }
    }
    .art-selected {
      .mask {
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
      }
    }
  }
}
</style>